function btnActive(cla) {
    $(document).on("touchstart", cla, function (e) {
        $(this).addClass("active");
    });
    $(document).on("touchmove", cla, function (e) {
        if ($(this).hasClass("active")) $(this).removeClass("active");
    });
    $(document).on("touchend", cla, function (e) {
        if ($(this).hasClass("active")) $(this).removeClass("active");
    });
}

function latey(ele, num, s, yanchi, linear) {
    num = num || 0;
    s = s || 1;
    yanchi = yanchi || 0;
    linear = linear || 'linear';
    ele.css({
        'transition': 'all ' + s + 's ' + linear + ' ' + yanchi + 's',
        '-webkit-transition': 'all ' + s + 's ' + linear + ' ' + yanchi + 's',
        '-moz-transition': 'all ' + s + 's ' + linear + ' ' + yanchi + 's',
        '-ms-transition': 'all ' + s + 's ' + linear + ' ' + yanchi + 's',
        '-o-transition': 'all ' + s + 's ' + linear + ' ' + yanchi + 's',
        'transform': 'translateY(' + num + 'px)',
        '-webkit-transform': 'translateY(' + num + 'px)',
    });
};

function con() {
    $('.contBoxMp3').on('tap', function () {
        $(this).toggleClass('active');
        if ($(this).hasClass("active")) {
            $('#mp3')[0].pause()
        } else {
            $('#mp3')[0].play()
        }
    })
    var ti = [
        [
            '高价护眼灯就一定护眼？', ['是', '不是'], './img/55.png', '不是'
        ],
        [
            '作为家长，孩子学习时应该配置哪个灯光？', ['护眼灯', '霓虹彩灯'], './img/11.png', '护眼灯'
        ],
        [
            '购买护眼灯时，你更应该关注下面哪个因素？', ['色温', '外观'], './img/22.png', '色温'
        ],
        [
            '使用护眼灯的过程中，下面哪个因素最伤害眼睛？', ['蓝光', '外表颜色'], './img/33.png', '蓝光'
        ],
        [
            '下面哪个色温对眼睛伤害大？', ['4000K ', '12000K'], './img/44.png', '12000K'
        ]
    ], tilen = ti.length, tiactnub = 0, Answer = 0, flag = true;
    ;


    var randomsort = function (a, b) {
        return Math.random() > .5 ? -1 : 1;
    }
//每次进入对题目顺序重新排序
    function shuffle(arr) {
        var i, j, temp;
        for (i = arr.length - 1; i > 0; i--) {
            j = Math.floor(Math.random() * (i + 1));
            temp = arr[i];
            arr[i] = arr[j];
            arr[j] = temp;
        }
        return arr;
    };
    var arr2 = shuffle(ti);
//对新顺序每道题答案进行重新排序
    for (var i = 0; i < tilen; i++) {
        arr2[i][1].sort(randomsort)
        var aa = arr2[i][1];
    }
    addText()
    function addText() {
        $('.contNum span').eq(0).text(tiactnub + 1);
        $('.contNum span').eq(1).text(tilen);
        $('.contW h2').text(arr2[tiactnub][0]);
        $('.contW img').attr('src', arr2[tiactnub][2])
        $('.contWBtn').eq(0).text(arr2[tiactnub][1][0])
        $('.contWBtn').eq(1).text(arr2[tiactnub][1][1])
        $('.contWBtn').eq(0).attr('data-val', arr2[tiactnub][3]);
        $('.contWBtn').eq(1).attr('data-val', arr2[tiactnub][3]);
    }

    $('.contWBtn').on('touchstart', function () {
        if (flag) {
            tiactnub++;
            flag = false;
            if (tiactnub < tilen) {
                if ($(this).attr('data-val') == $(this).text()) {
                    $(this).addClass('btnYes');
                    Answer++;
                  cc()
                } else {
                    $(this).addClass('btnNo');
                    setTimeout(function () {
                        cc()
                    }, 350)
                }
            }
            function cc() {
                latey($('.contW'), -400, 0.4, .2);
                latey($('.contWw'), 400, 0.4, 0.2);
                $('.contWw')[0].addEventListener('webkitTransitionEnd', bb);
                function bb() {
                    $('.contWw')[0].removeEventListener("webkitTransitionEnd", bb);
                    latey($('.contW'), 0, 0.4, 0.2);
                    latey($('.contWw'), 0, 0.4, 0.2);
                    setTimeout(function () {
                        $('.contWBtn').removeClass('btnNo');
                        $('.contWBtn').removeClass('btnYes');
                        addText()
                        flag = true;
                    }, 100)
                }
            }
            if (tiactnub == 5) {
                flag = false;
                if ($(this).attr('data-val') == $(this).text()) {
                    $(this).addClass('btnYes');
                    Answer++;
                } else {
                    $(this).addClass('btnNo');
                }
                setTimeout(function () {
                    $('.Result').show();
                    $('.ResultNub').text(Answer * 20)
                    if (Answer >= 3) {
                        $('.contSuccess').show();
                    }else{
                        $('.contFail').show();
                    }
                    switch (Answer) {
                        case 0:
                            $('.Resultbili').text('2')
                            break;
                        case 1:
                            $('.Resultbili').text('24')
                            break;
                        case 2:
                            $('.Resultbili').text('41')
                            break;
                        case 3:
                            $('.Resultbili').text('67')
                            break;
                        case 4:
                            $('.Resultbili').text('85')
                            break;
                        case 5:
                            $('.Resultbili').text('99')
                            break;
                    }
                }, 500)
            }
        }


    })


}

